<template>
  <el-dialog
    width="1000"
    title="已领取"
    v-model="visible"
    draggable
    class="dialog"
    @close="closeDialog"
  >
    <el-form v-show="showSearch" :model="queryParams" ref="queryRef" :inline="true">
      <h3>实体券名称：{{ couponName }}</h3>
      <el-form-item label="用户名称" prop="nickName">
        <el-input
          v-model.trim="queryParams.nickName"
          placeholder="请输入用户名称"
          @keyup.enter="handleSearch(true)"
        />
      </el-form-item>
      <el-form-item label="领取时间区间" prop="time">
        <el-date-picker
          style="width: 240px"
          v-model="queryParams.time"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="x"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        />
      </el-form-item>
      <el-form-item label="核销客服" prop="verifyUserName">
        <el-input
          v-model.trim="queryParams.verifyUserName"
          placeholder="请输入客服名称"
          @keyup.enter="handleSearch(true)"
        />
      </el-form-item>
      <el-form-item label="实体券状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable>
          <el-option label="全部状态" value=""></el-option>
          <el-option label="已使用" value="2"></el-option>
          <el-option label="未使用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="用户名称" align="center" prop="nickName" />
      <el-table-column label="用户账号" align="center" prop="mobile" />
      <el-table-column label="领取时间" align="center" prop="acquireTime" width="160" />
      <el-table-column label="用券时间" align="center" prop="useTime" width="160" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="{ row }">
          <span>{{ statusOptions.find((i) => i.value == row?.status)?.label }}</span>
        </template>
      </el-table-column>
      <el-table-column label="核销客服" align="center" prop="verifyUserName" />
      <el-table-column label="操作" align="center" fixed="right">
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            v-if="row.status === 1 || row.status === 4"
            @click="handleFailure(row.clientCouponId)"
            >失效</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-right: 50px; position: relative">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>
<script setup>
import {
  expireCouponApi,
  expireGetCouponApi,
  exportDetailApi,
  getClaimedCouponApi
} from '@/api/marketing/activity'
const statusOptions = [
  // 状态0失效1正常2已使用3已过期4待开始
  { label: '已失效', value: 0 },
  { label: '未使用', value: 1 },
  { label: '已使用', value: 2 },
  { label: '已过期', value: 3 },
  { label: '待开始', value: 4 }
]
const queryRef = ref()
const tableList = ref([])
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const visible = ref(false)
const couponName = ref('')
const queryParams = ref({
  packName: null,
  status: '',
  pageNum: 1,
  pageSize: 10,
  couponId: null,
  cityName: inject('cityName')
})
function handleSearch(type) {
  if (type) {
    // 搜索
    queryParams.value.pageNum = 1
    getList()
  } else {
    // 重置
    queryRef.value.resetFields()
    handleSearch(true)
  }
}
/** 查询用户列表 */
function getList() {
  loading.value = true
  const params = {
    ...queryParams.value,
    startTime: queryParams.value.time?.length ? queryParams.value.time[0] : '',
    endTime: queryParams.value.time?.length ? queryParams.value.time[1] : ''
  }
  delete params.time
  getClaimedCouponApi(params)
    .then((res) => {
      loading.value = false
      tableList.value = res?.data?.rows ?? []
      total.value = res?.data?.total ?? 0
    })
    .catch(() => {
      loading.value = false
      tableList.value = []
      total.value = 0
    })
}
function handleFailure(clientCouponId) {
  console.log('失效了', clientCouponId)
  ElMessageBox.confirm('该券将会被强制失效', '操作', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  })
    .then(() => {
      expireGetCouponApi({ clientCouponId }).then(() => {
        ElMessage({
          type: 'success',
          message: '操作成功'
        })
        handleSearch(true)
      })
    })
    .catch(() => {})
}
function closeDialog() {
  queryRef.value.resetFields()
  queryParams.value.pageNum = 1
}
function init(row) {
  visible.value = true
  queryParams.value.couponId = row.id
  couponName.value = row.couponName
  getList()
}

defineExpose({
  init
})
</script>
<style lang="scss" scoped></style>
